<template>
	<div class="container" :id="id">
		<div class="container-box">
			<div class="content-box">
				<template v-for="(item,$index) in tabledata">
					<div class="row header-tr">
						<template v-for="(key,$ind) in item">
							<div class="col header-rd">{{key.title}}</div>
						</template>
					</div>
					<div class="row content-tr">
						<template v-for="(key,$ind) in item">
							<div class="col" v-html="$options.filters.filterContent(key.content)"></div>
						</template>
					</div>
				</template>
				
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		props:['tabledata','id'],
		filters: {
			filterContent(content) {
				if (content == "" || content == ' ' ) {
					return "<span>-</span>";
				}
				if (content.startsWith("http")) {
					if (content.endsWith("pdf")) {
					return `<a href="${content}"><i class="fa fa-book"></i></a>`;
					}
					return `<a href="${content}"><i class="fa fa-home"></i></a>`;
				}
				if (["是", "yes", "有"].indexOf(content.trim()) >= 0) {
					return `<i class="fa fa-check" style="color: green;"></i>`;
				}
				if (["否", "no", "无", "没有"].indexOf(content.trim()) >= 0) {
					return `<i class="fa fa-close" style="color: gray;"></i>`;
				}
			
				if (content.length > 100) {
					return `<div style="text-align:left">${content}</div>`;
				}
				return content;
			}
		}
		
	}
</script>
<style scoped="scoped">
	.col{
		padding: 15px 0;
	}
	.header-tr{
		background-color: #f7f9fc;
	}
	.header-rd{
		border: 1px solid #E5E5E5;
		text-align: center;
		border-left: none;
	}
	.header-tr .header-rd:first-child{
		border-left:1px solid #E5E5E5;
	}

	.content-tr .col{
		border: 1px solid #E5E5E5;
		text-align: center;
		border-left: none;
		border-top: none;
	}
	.content-tr .col:first-child{
		border-left:1px solid #E5E5E5;
	}
</style>